<template>
  <div class="float-btn" :class="getPosition()" :style="{
    marginRight: config.pageConfig.marginright + 'px',
    marginLeft: config.pageConfig.marginleft + 'px',
    marginBottom: config.pageConfig.marginBottom + 'px',
  }">
    <div v-for="(item, index) in config.pageConfig.imgList" :key="index" class="float-btn-single" :style="{
      color:
        config.pageConfig.custom == '1' ? '#fff' : config.pageConfig.color,
      borderColor:
        config.pageConfig.custom == '1' || config.pageConfig.style == '2'
          ? 'transparent'
          : config.pageConfig.color,
      backgroundColor:
        config.pageConfig.custom == '1' && config.pageConfig.style == '1'
          ? config.pageConfig.color
          : 'transparent',
      opacity: config.pageConfig.opacity + '%',
      marginBottom: config.pageConfig.iconmargin + 'px',
    }">
      <!-- <el-icon v-if="config.pageConfig.style == '1' && item.iconUrl">
        <component :is="item.iconUrl"></component>
      </el-icon> -->
      <span v-if="config.pageConfig.style == '1' && item.iconUrl" class="iconfont"
        :class="'icon-' + item.iconUrl"></span>
      <img v-else-if="config.pageConfig.style == '2' && item.imgUrl" :src="item.imgUrl" alt="" />
      <img v-else-if="config.pageConfig.style == '2' && !item.imgUrl" src="../../../../../../assets/app/bar/default_picture.png"
        alt="" />
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "Floatbtn",
};
</script>
<script lang="ts" setup>
import { reactive, onMounted } from "vue";
const config = defineProps({
  pageConfig: {
    type: Object,
    default: {
      style: "1",
      custom: "1",
      position: "4",
      color: "#FD463E",
      opacity: 100,
      marginright: 20,
      marginleft: 20,
      marginBottom: 50,
      iconmargin: 15,
      imgList: [
        {
          type: "link",
          iconUrl: "31dianhua",
          imgUrl: "",
          name: "",
          url: "",
        },
      ],
    },
  },
  show: {
    type: Boolean,
    default: true,
  },
});
let emits = defineEmits<{ (e: "sliceItem", index: number | string): void }>();
const getPosition = () => {
  if (config.pageConfig.position == "1") {
    return "left-top";
  } else if (config.pageConfig.position == "2") {
    return "right-top";
  } else if (config.pageConfig.position == "3") {
    return "left-bottom";
  } else if (config.pageConfig.position == "4") {
    return "right-bottom";
  }
};
const sliceItem2 = () => {
  const index = document
    .getElementsByClassName("float-btn")[0]
    .getAttribute("index");
  console.log(index);
  emits("sliceItem", index);
};
</script>
<style lang="scss" scoped>
.float-btn {
  position: fixed;
  z-index: 33;

  &.left-top {
    top: 50px;
    left: 20px;
  }

  &.right-top {
    top: 50px;
    right: 20px;
  }

  &.left-bottom {
    bottom: 50px;
    left: 20px;
  }

  &.right-bottom {
    bottom: 50px;
    right: 20px;
  }

  &:hover {
    .sure-close {
      display: block;
    }
  }

  .float-btn-single {
    width: 45px;
    height: 45px;
    text-align: center;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;

    img {
      width: 45px;
      height: 45px;
      border-radius: 50%;
    }

    .iconfont {
      font-size: 26px;
    }
  }
}

.sure-close {
  display: none;
  position: absolute;
  right: 10px;
  top: 0px;
  width: 10px;
  height: 10px;
  font-size: 20px;
  cursor: pointer;
  color: #333;
  z-index: 666;
}
</style>
